<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:s="http://jboss.com/products/seam/taglib"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:a="http://richfaces.org/a4j"
    template="/layout/template.xhtml">

    <ui:define name="l_content">
		<ui:include src="/l_content/lc.xhtml" />
    </ui:define>
    
    <ui:define name="body">
    	<h:form>
    		<a:outputPanel id="avp_id">
	    		<h:panelGroup>
					<h:panelGroup rendered="#{kMyAvatar.uploadVisible()}">
						<rich:fileUpload id="upload_id"
			    			autoclear="true"
			    			noDuplicate="true"
			    			sizeErrorLabel="TOO BIG"
			    			acceptedTypes="PNG,JPG" 
			    			listHeight="50"
			    			maxFilesQuantity="1"
			    			fileUploadListener="#{kMyAvatar.processUpload}" >
			    			<a:support event="onuploadcomplete" action="#{kMyAvatar.init()}" reRender="avp_id"/>
			    		</rich:fileUpload>
					</h:panelGroup>
					<h:panelGroup rendered="#{!kMyAvatar.uploadVisible()}">
						<script type="text/javascript">
						    jQuery(function(){
						    	jQuery('#jcroptarget').Jcrop({
							        trackDocument: true,
							        onChange: showCoords,
							        onSelect: showCoords,
							        aspectRatio: 1,
							        minSize: [50,50],
							        maxSize: [200,200]
						        });
						    });
						
						    function showCoords(c) {
						    	jQuery('#x').val(c.x);
						    	jQuery('#y').val(c.y);
						    	jQuery('#x2').val(c.x2);
						    	jQuery('#y2').val(c.y2);
						    	jQuery('#w').val(c.w);
						    	jQuery('#h').val(c.h);
						    };
						</script>
						<table>
							<tr>
								<td>
									<img id="jcroptarget" src="/#{kInitParam.imgPath}/av_#{kMyAvatar.user.id}/#{kMyAvatar.img.name}" />
									<div style="display: none;">
									    <label>X1 <input type="text" name="x" id="x" size="4" /></label>
									    <label>Y1 <input type="text" name="y" id="y" size="4" /></label>
									    <label>X2 <input type="text" name="x2" id="x2" size="4" /></label>
									    <label>Y2 <input type="text" name="y2" id="y2" size="4" /></label>
									    <label>W <input type="text" name="w" id="w" size="4" /></label>
									    <label>H <input type="text" name="h" id="h" size="4" /></label>
									</div>
								</td>
							</tr>
							<tr>
								<td>
									<h:panelGroup id="thumb_img">
										<img id="thumb_" src="/#{kInitParam.imgPath}/av_#{kMyAvatar.user.id}/#{kMyAvatar.img.thumb}" style="border: 1px solid gray;"/>
									</h:panelGroup>
								</td>
							</tr>
						</table>
						<br />
				   		<table>
				    		<tr>
				    			<td>
				    				<a:commandButton action="#{kMyAvatar.save()}" value="#{messages.crop_and_save_msg}" reRender="thumb_img,messages"/>
				    			</td>
				    			<td>
				    				<a:commandButton action="#{kMyAvatar.deleteImg(kMyAvatar.img)}" value="#{messages.delete_msg}" reRender="avp_id,messages"/>
				    			</td>
				    		</tr>
				    	</table>
			    	</h:panelGroup>
	    		</h:panelGroup>
    		</a:outputPanel>
 			<h:commandButton action="my_account" value="#{messages.back_msg}" immediate="true"/>
    	</h:form>
    </ui:define>
</ui:composition>